<template>
  <div class="container">
    <div class="app-container" style="padding: 20px 20px;">
      <el-row class="header" style="font-size: 14px;">
        <span>车牌号码：</span>
        <el-input v-model="pageForm.carNumber" placeholder="请输入车牌号码" size="small" style="width: 200px; margin: 0 10px;" />
        <span>车主姓名：</span>
        <el-input v-model="pageForm.personName" placeholder="请输入车主姓名" size="small" style="width: 200px; margin: 0 10px;" />
        <span>状态：</span>
        <el-select v-model="pageForm.cardStatus" placeholder="未选择" size="small" style="width: 200px; margin: 0 10px;">
          <el-option label="未选择" value="" />
          <el-option label="可用" value="0" />
          <el-option label="已过期" value="1" />
        </el-select>
        <el-button size="medium" type="primary" @click="getCardList">查询</el-button>
      </el-row>
      <el-divider />
      <el-row justify="space-between" type="flex" style="margin-bottom: 15px;">
        <el-col>
          <el-button size="medium" type="primary">添加月卡</el-button>
          <el-button size="medium" type="primary">批量删除</el-button>
        </el-col>
        <el-col :span="14">
          <el-alert
            :title="alertTitle"
            type="warning"
            :closable="false"
            show-icon
          />
        </el-col>
      </el-row>
      <el-table selection :data="list">
        <el-table-column width="80" label="序号">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="车主名称" prop="personName" />
        <el-table-column label="联系方式" prop="phoneNumber" />
        <el-table-column label="车牌号码" prop="carNumber" />
        <el-table-column label="车辆品牌" prop="carBrand" />
        <el-table-column label="剩余有效天数" prop="totalEffectiveDate" />
        <el-table-column label="状态" prop="phoneNumber">
          <template #default="{ row }">
            {{ row.cardStatus ? '已过期' : '可用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="phoneNumber">
          <template #default="{ row }">
            <el-button type="text" size="mini">续费</el-button>
            <el-button type="text" size="mini">查看</el-button>
            <el-button type="text" size="mini" @click="edit(row.id)">编辑</el-button>
            <el-button type="text" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top: 20px;" type="flex" justify="end">
        <el-pagination
          :current-page="pageForm.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageForm.pageSize"
          layout="total, prev, pager, next, sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
  </div>
</template>
<script>
import { getCardListAPI, getCardProportionAPI } from '@/api'

export default {
  name: 'Approvals',
  data() {
    return {
      pageForm: {
        page: 1,
        pageSize: 10,
        cardStatus: '',
        personName: '',
        carNumber: ''
      },
      list: [],
      total: 0,
      Proportion: {}
    }
  },
  computed: {
    alertTitle() {
      return `本园区共计 ${this.Proportion.spaceNumber} 个车位，月卡用户 ${this.Proportion.cardCount} 人，车位占有率 ${this.Proportion.proportion}%`
    }
  },
  created() {
    this.getCardList()
    this.getCardProportion()
  },
  methods: {
    async getCardList() {
      const { rows, total } = await getCardListAPI(this.pageForm)
      this.list = rows
      this.total = total
    },
    async getCardProportion() {
      this.Proportion = await getCardProportionAPI()
    },
    edit(id) {

    },
    handleCurrentChange(page) {
      this.pageForm.page = page
      this.getCardList()
    },
    handleSizeChange(pageSize) {
      this.pageForm.pageSize = pageSize
      this.getCardList()
    }
  }
}
</script>

<style scoped>
  .header span{
    margin-left: 10px;
  }
</style>
